<template>
	<view>
		<view class="head">填写武将信息</view>
		<view class="cont">
			<view class="item">
				<view class="title">武将势力</view>
				<uni-data-picker v-model="formData.country" :localdata="country" popup-title="选择势力">
				</uni-data-picker>
			</view>
			<view class="item">
				<view class="title">武将名称</view>
				<uni-easyinput v-model="formData.name" maxlength="3" placeholder="请输入名称" />
			</view>
			<view class="item">
				<view class="title">武将称号</view>
				<uni-easyinput v-model="formData.title" maxlength="5" placeholder="请输入称号" />
			</view>
			<view class="item">
				<view class="title">武将体力</view>
				<uni-data-picker v-model="formData.hp" :localdata="hpList" popup-title="选择体力值">
				</uni-data-picker>
			</view>
			<view class="item">
				<view class="title">武将技能</view>
				<view class="item-box-right">
					<view class="ji-box" v-for="(item,index) in jineng" :key="index">
						<view class="fl">
							<view class="box-text">名称</view>
							<uni-easyinput v-model="item.title" maxlength="2" placeholder="请输入技能名" />
						</view>
						<view class="fl">
							<view class="box-text">内容</view>
							<uni-easyinput type="textarea" maxlength="60" autoHeight v-model="item.text"
								placeholder="请输入技能内容" />
						</view>
					</view>
					<view class="item-box-bom">
						<view class="add-ji" @click="addji">
							<image class="ji-img" src="../../static/images/icon/add.png"></image>
							<view>添加技能</view>
						</view>
						<view class="del-ji" @click="delji">
							<image class="ji-img" src="../../static/images/icon/del.png"></image>
							<view>删除技能</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">武将图片</view>
				<view class="rightBox">
					<view class="add-ji" @click="addImg" v-if="!cardImg">
						<image class="ji-img" src="../../static/images/icon/updata.png"></image>
						<view>添加卡图</view>
					</view>
					<view class="cardBox" wx:else>
						<image class="cardImg" :src="cardImg"></image>
						<view class="cardBox-r">
							<view class="add-ji imgBtn" @click="lookImg">
								<image class="ji-img" src="../../static/images/icon/updata.png"></image>
								<view>预览卡图</view>
							</view>
							<view class="del-ji imgBtn" @click="delImg">
								<image class="ji-img" src="../../static/images/icon/del.png"></image>
								<view>删除卡图</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="btn">
			<view class="submit" @click="submit">提交信息</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				formData: {
					country: '魏',
					name: '张三',
					title: '啦啦的啦啦',
					hp: '3',
				},
				country: [{
						text: "魏",
						value: "魏",
					},
					{
						text: "蜀",
						value: "蜀",
					},
					{
						text: "吴",
						value: "吴",
					},
					{
						text: "群",
						value: "群",
					},
					{
						text: "神",
						value: "神",
					},
				],
				hpList: [{
						text: "1",
						value: "1",
					},
					{
						text: "2",
						value: "2",
					},
					{
						text: "3",
						value: "3",
					},
					{
						text: "4",
						value: "4",
					},
					{
						text: "5",
						value: "5",
					},
					{
						text: "6",
						value: "6",
					},
				],
				jineng: [{
					title: '',
					text: ''
				}],
				cardImg: null,
				show: false,
			}
		},
		computed: {},
		watch: {},
		methods: {
			addji() {
				let one = {
					title: '',
					text: ''
				}
				let list = this.jineng
				if (list.length < 2) {
					list.push(one)
					this.jineng = list
				} else {
					wx.showToast({
						title: '最多2个技能',
						icon: 'none'
					})
				}
			},
			delji() {
				let list = this.jineng
				if (list.length > 1) {
					list.pop()
					this.jineng = list
				} else {
					wx.showToast({
						title: '至少一个技能',
						icon: 'none'
					})
				}
			},
			addImg() {
				let that = this
				wx.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album'],
					sizeType: ['original', 'compressed'],
					success(res) {
						let url = res.tempFiles[0].tempFilePath
						that.cardImg = url
					}
				})
			},
			delImg() {
				this.cardImg = null
			},
			lookImg() {

			},
			submit() {
				let obj = this.formData
				obj.cardImg = this.cardImg
				obj.jineng = this.jineng
				if (obj.country == "") {
					uni.showToast({
						icon: 'none',
						title: '选择势力'
					})
					return
				}
				if (obj.name == "") {
					uni.showToast({
						icon: 'none',
						title: '输入名称'
					})
					return
				}
				if (obj.title == "") {
					uni.showToast({
						icon: 'none',
						title: '输入称号'
					})
					return
				}
				if (obj.hp == "") {
					uni.showToast({
						icon: 'none',
						title: '选择体力'
					})
					return
				}
				if (obj.cardImg == null) {
					uni.showToast({
						icon: 'none',
						title: '添加卡图'
					})
					return
				}
				console.log(obj)
				// return
				this.$store.commit('card/set_sgsInfo', obj)
				uni.setStorageSync('sgsInfo', obj)
				uni.navigateTo({
					url: '/sub-diy/sgsDetail/sgsDetail'
				})
			}
		},
		onLoad(options) {},
		onShow() {},
		onReady() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		onShareAppMessage() {},
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 100rpx;
		background: linear-gradient(#00AEEC, #1296db);
		color: #fff;
		font-size: 36rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.item {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin-bottom: 10rpx;
		padding-right: 30rpx;

		.title {
			width: 160rpx;
			font-size: 30rpx;
			margin-left: 30rpx;
			margin-right: 20rpx;
		}

		.ji-box {
			width: 100%;

			.fl {
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;

				.box-text {
					margin-right: 10rpx;
				}
			}
		}

		.item-box-bom {
			margin-top: 25rpx;
			width: 480rpx;
			display: flex;
			justify-content: space-between;

			.add-ji {
				width: 184rpx;
				height: 60rpx;
				font-size: 26rpx;
				background: linear-gradient(#00AEEC, #1296db);
				display: flex;
				align-items: center;
				color: #fff;
				border-radius: 10rpx;
			}

			.del-ji {
				width: 184rpx;
				height: 60rpx;
				font-size: 26rpx;
				background: linear-gradient(red, #F44336);
				/* background-color: #F44336; */
				display: flex;
				align-items: center;
				color: #fff;
				border-radius: 10rpx;
			}

			.ji-img {
				margin-left: 10rpx;
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}


	}


	.rightBox {
		display: flex;
		height: 200rpx;
		display: flex;
		align-items: center;

		.add-ji {
			width: 184rpx;
			height: 60rpx;
			font-size: 26rpx;
			background: linear-gradient(#00AEEC, #1296db);
			display: flex;
			align-items: center;
			color: #fff;
			border-radius: 10rpx;
		}

		.del-ji {
			width: 184rpx;
			height: 60rpx;
			font-size: 26rpx;
			background: linear-gradient(red, #F44336);
			/* background-color: #F44336; */
			display: flex;
			align-items: center;
			color: #fff;
			border-radius: 10rpx;
		}

		.ji-img {
			margin-left: 10rpx;
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.cardBox {
			height: 200rpx;
			overflow: hidden;
			display: flex;
		}

		.cardBox-r {
			margin-left: 30rpx;
		}

		.cardImg {
			width: 200rpx;
			height: 200rpx;
		}

		.imgBtn {
			margin-top: 30rpx;
		}

		.btn {
			margin-top: 40rpx;
		}

		.ji-img {
			margin-left: 10rpx;
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}


	.btn {
		margin-top: 10rpx;
		background-color: #fff;
		padding-top: 30rpx;
		padding-bottom: 80rpx;

		.submit {
			margin: 0 auto;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: linear-gradient(#00AEEC, #1296db);
			color: #fff;
			border-radius: 20rpx;
		}
	}
</style>
